<template>
  <div class="row7">
    <div class="box">
      <!-- 这个盒子是用来放下拉选择框的 -->
       <div
        class="mySelect"
        style="
          position: absolute;
          width: 110px;
          top: 50px;
          right: 5px;
          z-index: 9;
        "
      >
        <!-- 这个盒子是用来放下拉选择框的 -->
        <el-select v-model="value" placeholder="请选择年份">
          <!-- 这个是下拉选择框 -->
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
          <!-- 这个是下拉选择框的选项 -->
        </el-select>
      </div>
      <div class="col_1 echarts" id="row7_col_1"></div>
    </div>
    <div class="box">
      <div class="col_2 echarts" id="row7_col_2"></div>
    </div>
    <div class="box">
      <div class="col_3 echarts" id="row7_col_3"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "row7",
  // 数据
  data() {
     return {
      // 这个是 下拉框可以选择的数据 label 是显示的文字  value 是你选则好了 会存到 value 里
      // value为选中时的值  你想想咱们是不是要王后端传年份进行查询丫  所以 选中的值应该为你要传递的值
      // value 不能为空  不能重复  所以全部咱们可以随便给一个  一会做判断
      options: [
        {
          value: 0,
          label: "全部",
        },
        {
          value: 2015,
          label: "2015",
        },
        {
          value: 2016,
          label: "2016",
        },
        {
          value: 2017,
          label: "2017",
        },
        {
          value: 2018,
          label: "2018",
        },
        {
          value: 2019,
          label: "2019",
        },
        {
          value: 2020,
          label: "2020",
        },
        {
          value: 2021,
          label: "2021",
        },
        {
          value: 2022,
          label: "2022",
        },
        {
          value: 2023,
          label: "2023",
        },
        {
          value: 2024,
          label: "2024",
        },
        {
          value: 2025,
          label: "2025",
        },
        {
          value: 2026,
          label: "2026",
        },
        {
          value: 2027,
          label: "2027",
        },
        {
          value: 2028,
          label: "2028",
        },
        {
          value: 2029,
          label: "2029",
        },
        {
          value: 2030,
          label: "2030",
        },
        {
          value: 2031,
          label: "2031",
        },
        {
          value: 2032,
          label: "2032",
        },
        {
          value: 2033,
          label: "2033",
        },
        {
          value: 2034,
          label: "2034",
        },
        {
          value: 2035,
          label: "2035",
        },
      ],
      // 这个是用来存 选中项的 value
      value: 0,
      // 这个是用来记录次数的  可以整除2的时候为透明色  不可以整除2的时候为自己定的颜色 起到一个状态作用
      colorFlage: 0,
    };
  },
   // 监听器 监听数据变化
  // 这里写监听器 监听它的变化
  watch: {
    'value': {  // 监听 value 当他发生变化的时候打印变化后的值  加引号  不加引号是变量
      handler(newVal, oldVal) { //   固定语法 两个形参 第一个变化后的值  第二个变化钱的值
        console.log(newVal, oldVal); 
        // 这里咱们就可以的到他变化 并且得到咱们要传给后端的值 newVal
        // 当变化的时候咱们执行渲染的方法
        this.rendering()
      },
      // immediate: true  // 开启页面加载就执行  这样 页面加载 为 0 的时候也会执行
    }
  },
  // 页面加载就执行
  mounted() {
    this.getCol7_1_1(
      document.querySelector("#row7_col_1"),
      "7.1行政处罚-次数分段统计柱状图(家/段次)"
    );
    this.getCol7_2(
      document.querySelector("#row7_col_2"),
      "7.2行政处罚-市级报送分析柱状图(条)"
    );
    this.getCol7_3(
      document.querySelector("#row7_col_3"),
      "7.3行政处罚-金额分段统计柱状图(条/万元)"
    );
  },
 
  // 方法
  methods: {
    // 渲染什么
     async rendering() {
      // 接口全年   http://172.16.1.170:8080/cxdsj/dsjAction.xzcfcsSelect.do
      // 接口月  http://172.16.1.170:8080/cxdsj/dsjAction.xzcfndcsSelect.do
      // let url
      if (this.value === 0) {  // 获取全年
        this.getCol7_1_1(document.querySelector("#row7_col_1"),"7.1行政处罚-次数分段统计柱状图(家/段次)")
      } else { // 获取某一年
        this.getCol7_1_2(document.querySelector("#row7_col_1"),"7.1行政处罚-次数分段统计柱状图(家/段次)")
      }
    },
    // 7.1.1全部年份
    async getCol7_1_1(domName, title) {
      const { data: res } = await this.$http.get(
        " http://172.16.1.170:8080/cxdsj/dsjAction.xzcfcsSelect.do"
      );
      // console.log('7.1.1', res);
      let str = res.substring(5);
      let xzcfCs = eval("(" + str + ")");
      const myChart = echarts.init(domName);
      var option = {
        title: {
          text: title,
          textStyle: {
            color: "#8fc4ff",
            fontsize: "20px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        color: ["#63caff", "#3608FE"],
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        grid: {
          containLabel: true,
          top: "25%",
          left: 20,
          right: 20,
          bottom: "5%",
          // top: 40
        },
        xAxis: {
          axisLabel: {
            color: "#c0c3cd",
            fontSize: 15,
            interval: 0,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#384267",
              width: 1,
              type: "dashed",
            },
            show: true,
          },
          // data: [
          //   '3以下',
          //   '3~5',
          //   '5~10',
          //   '10以上'
          // ],
          data: xzcfCs.map((item) => {
            return item.name;
          }),
          type: "category",
        },
        yAxis: {
          axisLabel: {
            color: "#c0c3cd",
            fontSize: 14,
          },

          splitLine: {
            show: true,
            lineStyle: {
              color: "#384267",
              type: "dashed",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#384267",
              width: 1,
              type: "dashed",
            },
            show: true,
          },
          name: "",
        },
        series: [
          {
            // data: [200, 85, 112, 275],
            data: xzcfCs.map((item) => {
              return item.value;
            }),
            type: "bar",
            barWidth: 40,
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: "#3A1BFD",
                  },
                  {
                    offset: 1,
                    color: "#3BEFFD",
                  },
                ],
              },
            },
            label: {
              show: true,
              position: "top",
              distance: 10,
              color: "#fff",
            },
          },
          {
            data: [1, 1, 1, 1, 1, 1, 1],
            type: "pictorialBar",
            barMaxWidth: "20",
            symbol: "diamond",
            symbolOffset: [0, "50%"],
            symbolSize: [30, 15],
          },
          {
            // data: [200, 85, 112, 275],
            data: xzcfCs.map((item) => {
              return item.value;
            }),
            type: "pictorialBar",
            barMaxWidth: "20",
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [30, 12],
            zlevel: 2,
          },
        ],
        tooltip: {
          trigger: "item",
          show: true,
        },
      };
      // 3.把配置项给实例对象
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 7.1.2月份 传参
    async getCol7_1_2(domName, title) {
      const {data: res} = await this.$http.get('http://172.16.1.170:8080/cxdsj/dsjAction.xzcfndcsSelect.do', { params: { years: this.value } })
      // console.log('7.1.2', res);
       let str = res.substring(5);
      let xzcfndCs = eval("(" + str + ")");
      const myChart = echarts.init(domName);
        var option = {
        title: {
          text: title,
          textStyle: {
            color: "#8fc4ff",
            fontsize: "20px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        color: ["#63caff", "#3608FE"],
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        grid: {
          containLabel: true,
          top: "25%",
          left: 20,
          right: 20,
          bottom: "5%",
          // top: 40
        },
        xAxis: {
          axisLabel: {
            color: "#c0c3cd",
            fontSize: 15,
            interval: 0,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#384267",
              width: 1,
              type: "dashed",
            },
            show: true,
          },
          // data: [
          //   '3以下',
          //   '3~5',
          //   '5~10',
          //   '10以上'
          // ],
          data: xzcfndCs.map((item) => {
            return item.name;
          }),
          type: "category",
        },
        yAxis: {
          axisLabel: {
            color: "#c0c3cd",
            fontSize: 14,
          },

          splitLine: {
            show: true,
            lineStyle: {
              color: "#384267",
              type: "dashed",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#384267",
              width: 1,
              type: "dashed",
            },
            show: true,
          },
          name: "",
        },
        series: [
          {
            // data: [200, 85, 112, 275],
            data: xzcfndCs.map((item) => {
              return item.value;
            }),
            type: "bar",
            barWidth: 40,
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: "#3A1BFD",
                  },
                  {
                    offset: 1,
                    color: "#3BEFFD",
                  },
                ],
              },
            },
            label: {
              show: true,
              position: "top",
              distance: 10,
              color: "#fff",
            },
          },
          {
            data: [1, 1, 1, 1, 1, 1, 1],
            type: "pictorialBar",
            barMaxWidth: "20",
            symbol: "diamond",
            symbolOffset: [0, "50%"],
            symbolSize: [30, 15],
          },
          {
            // data: [200, 85, 112, 275],
            data: xzcfndCs.map((item) => {
              return item.value;
            }),
            type: "pictorialBar",
            barMaxWidth: "20",
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [30, 12],
            zlevel: 2,
          },
        ],
        tooltip: {
          trigger: "item",
          show: true,
        },
      };
      // 3.把配置项给实例对象
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //  7.2
    async getCol7_2(domName, title) {
      const tit = ["", "报送总数", "省级迟报", "国家级迟报"];
      function handleOne(arr, titleArr = [], newArr = []) {
        if (titleArr.length !== 0) newArr.push(titleArr);
        arr.forEach((item) => {
          newArr.push(Object.values(item));
          // newArr.push(Object.key(item))
        });
        // console.dir(Object);
        return newArr;
      }
      const { data: res } = await this.$http.get(
        "http://172.16.1.170:8080/cxdsj/dsjAction.xzcfsbsSelect.do"
      );
      // console.log('7.2',res);
      let str = res.substring(5);
      let xzcfCsSj = eval("(" + str + ")");
      let newArr = handleOne(xzcfCsSj, tit);
      // console.log('7.2', newArr)
      var myChart = echarts.init(domName);
      var option = {
        title: {
          text: title,
          textStyle: {
            color: "#ffffff",
            fontsize: "20px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        toolbox: {
          right: "0%",
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        legend: {
          top: "13%",
          textStyle: {
            color: "#ccc",
          },
        },
        tooltip: {},
        grid: {
          top: "23%",
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        // color: ['#3b67cf', '#5cc996', '#cb8d14'],
        // color: ['#6c6be2', '#2db1ef', '#3b7ffd'],
        color: ["#5470c6", "#91cc75", "#fac858"],
        dataset: {
          // source: [
          //   ['', '报送总数', '省级迟报', '国家级迟报'],
          //   ['石家庄', 43.3, 85.8, 93.7],
          //   ['衡水', 83.1, 73.4, 55.1],
          //   ['保定', 86.4, 65.2, 82.5],
          //   ['沧州', 72.4, 53.9, 39.1],
          //   ['秦皇岛', 50, 60, 90],
          //   ['定州', 83.1, 73.4, 55.1],
          //   ['雄安', 43.3, 85.8, 93.7],
          //   ['唐山', 83.1, 73.4, 55.1],
          //   ['廊坊', 86.4, 65.2, 82.5],
          //   ['承德', 72.4, 53.9, 39.1],
          //   ['辛集', 50, 60, 90],
          //   ['新乐', 83.1, 73.4, 55.1],
          //   ['邢台', 43.3, 85.8, 93.7],
          // ]
          source: newArr,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "rgba(255, 255, 255, .6)",
          },
        },
        yAxis: {
          axisLabel: {
            color: "rgba(255, 255, 255, .6)",
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        // 添加滚动
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: "5%",
            start: 0,
            end: 30,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
      };
      // 3.把配置项给实例对象
      myChart.setOption(option);
      //  4.
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //  7.3
    async getCol7_3(domName, title) {
      const { data: res } = await this.$http.get(
        "http://172.16.1.170:8080/cxdsj/dsjAction.xzcfjeSelect.do"
      );
      // console.log('7.3', res);
      let str = res.substring(5);
      let xzcfJe = eval("(" + str + ")");
      var myChart = echarts.init(domName);
      var option = {
        title: {
          text: title,
          textStyle: {
            color: "#8fc4ff",
            fontsize: "20px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        color: ["#63caff", "#3608FE"],
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        grid: {
          containLabel: true,
          top: "25%",
          left: 20,
          right: 20,
          bottom: "5%",
          // top: 40
        },
        xAxis: {
          axisLabel: {
            color: "#c0c3cd",
            fontSize: 13,
            interval: 0,
            // rotate: '-10'
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#384267",
              width: 1,
              type: "dashed",
            },
            show: true,
          },
          // data: [
          //   '2以下',
          //   '2~5',
          //   '5~10',
          //   '10~20',
          //   '20~50',
          //   '50~100',
          //   '100以上'
          // ],
          data: xzcfJe.map((item) => {
            return item.name;
          }),
          type: "category",
        },
        yAxis: {
          axisLabel: {
            color: "#c0c3cd",
            fontSize: 14,
          },

          splitLine: {
            show: true,
            lineStyle: {
              color: "#384267",
              type: "dashed",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#384267",
              width: 1,
              type: "dashed",
            },
            show: true,
          },
          name: "",
        },
        series: [
          {
            // data: [200, 85, 112, 275, 305, 415, 741],
            data: xzcfJe.map((item) => {
              return item.value;
            }),
            type: "bar",
            barWidth: 30,
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: "#3A1BFD",
                  },
                  {
                    offset: 1,
                    color: "#3BEFFD",
                  },
                ],
              },
            },
            label: {
              show: true,
              position: "top",
              distance: 10,
              color: "#fff",
            },
          },
          {
            data: [1, 1, 1, 1, 1, 1, 1],
            type: "pictorialBar",
            barMaxWidth: "20",
            symbol: "diamond",
            symbolOffset: [0, "50%"],
            symbolSize: [30, 15],
          },
          {
            // data: [200, 85, 112, 275, 305, 415, 741],
            data: xzcfJe.map((item) => {
              return item.value;
            }),
            type: "pictorialBar",
            barMaxWidth: "20",
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [30, 12],
            zlevel: 2,
          },
        ],
        tooltip: {
          trigger: "item",
          show: true,
        },
      };
      // 3.把配置项给实例对象
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.row7 {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  height: 350px;
  .box {
    // flex: 3.5;
    position: relative;
    height: 100%;
    width: 30%;
    border: 1px solid #1480f0;
    &:nth-child(2) {
      width: 39%;
      border: 1px solid #1480f0;
    }

    & /deep/ .el-input__inner {
      background-color: transparent !important;
      max-width: 120px !important;
      max-height: 30px !important;
      color: #fff;
    }

    .echarts {
      position: relative;
      padding: 10px !important;
      height: 100%;
      width: 100%;

      // & /deep/ canvas {
      //   //background-color: #333;
      // }
    }

    &:nth-child(2n - 1) {
      border: 1px solid rgba(25, 186, 139, 0.17);
      background: #050d4b url(@/static/images/line_1.png);
      padding: 0 0.1875rem 0.1875rem;
      margin-bottom: 0.1875rem;
      flex-direction: column;
      justify-content: space-between;
    }
    &:first-child {
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "";
      }
      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    }
    &:last-child {
      &::before {
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "";
      }
      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    }
  }
}
</style>